<template>
  <div style="width:500px;height:500px;margin:30px auto 0 auto;background:#4F5051;padding:30px 0 0 30px; border-radius:45px">
      <div style="font-size:20px;">个人信息</div>
       
       <div class="userInfo">
           <div>
               <span>姓名：</span>
               <span>{{userData.name}}</span>
           </div>
           <div>
               <span>身份：</span>
               <span>{{userData.type === '0'?'普通用户':userData.type==='1'?'教练':'管理员'}}</span>
           </div>
           <div>
               <span>手机号：</span>
               <span>{{userData.phone}}</span>
           </div>
           <div v-if="userData.type==='0' || userData.type==='1'">
               <span>余额：</span>
               <span>{{userData.balance}}</span>
           </div>
           
           <div v-if="userData.type==='1' || userData.type==='2'">
               <span>薪资：</span>
               <span>{{userData.salary}}</span>
           </div>
           <div>
               <span>性别：</span>
               <span>{{userData.sex === '0'?'男':'女'}}</span>
           </div>
           <div>
               <span>出生年月日：</span>
               <span>{{userData.birthday}}</span>
           </div>
       </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            userData:{},
        }
    },
    created(){
        
    },
    mounted(){
        this.userData = JSON.parse(sessionStorage.getItem('userInfo'))
        console.log(this.userData)
    },
    methods:{
      
    }
}
</script>

<style scoped>
.userInfo{
    height: 400px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-content:center;
    padding-left: 20px;
}
.userInfo div{
    height: 50px;
    line-height: 50px;
    color: #DCD109;
}
</style>